<template>
  <div>
    <a-card>
      <h3>个热水澡我是你爸爸</h3>
      <a-form-model>
        <a-form-model-item label="作者名称">
          <a-input style="width: 300px" v-model="profileInfo.name"></a-input>
        </a-form-model-item>

        <a-form-model-item label="个人简介">
          <a-input type="textarea" v-model="profileInfo.desc"></a-input>
        </a-form-model-item>

        <a-form-model-item label="简介背景图URL">
          <a-input style="width: 300px" v-model="profileInfo.img"></a-input>
          <a-upload
            name="file"
            listType="picture"
            :multiple="false"
            :customRequest="uploadBgcImg"
            accept="image/jpeg,image/jpg,image/png"
          >
            <a-button> <a-icon type="upload" /> 点击上传 </a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="头像URL">
          <a-input style="width: 300px" v-model="profileInfo.avatar"></a-input>
          <a-upload
            name="file"
            listType="picture"
            :multiple="false"
            :customRequest="uploadAvatarImg"
            accept="image/jpeg,image/jpg,image/png"
          >
            <a-button> <a-icon type="upload" /> 点击上传 </a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="Email">
          <a-input style="width: 300px" v-model="profileInfo.email"></a-input>
        </a-form-model-item>

        <a-form-model-item label="微信">
          <a-input style="width: 300px" v-model="profileInfo.wechat"></a-input>
        </a-form-model-item>

        <a-form-model-item label="QQ">
          <a-input style="width: 300px" v-model="profileInfo.qqchat"></a-input>
        </a-form-model-item>

        <a-form-model-item label="微博">
          <a-input style="width: 300px" v-model="profileInfo.weibo"></a-input>
        </a-form-model-item>

        <a-form-model-item label="B站地址">
          <a-input style="width: 300px" v-model="profileInfo.bili"></a-input>
        </a-form-model-item>

        <a-form-model-item>
          <a-button
            type="primary"
            style="margin-right: 15px"
            @click="updateProfile(profileInfo.id)">更新</a-button
          >
          <a-button type="danger" @click="updateCancel">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'

export default {
  data () {
    return {
      profileInfo: {
        id: 1,
        name: '',
        desc: '',
        qqchat: '',
        wechat: '',
        weibo: '',
        bili: '',
        email: '',
        img: '',
        avatar: '',
      },
    }
  },
  created () {
    this.getProfileInfo(1)
  },
  methods: {
    async getProfileInfo (id) {
      const { data: res } = await this.$http.get(`profile/${id}`)
      if (res.status !== 200) return this.$message.error(res.message)
      this.profileInfo = res.data
    },
    uploadAvatarImg (info) {
      var reg = /\.[^.]+$/
      const imgKey = '/profileImg/' + 'avatar' + reg.exec(info.file.name)
      var cos = new COS({
        // 必选参数
        getAuthorization: (options, callback) => {
          this.$http
            .get('cos/credential', { params: { userImgPath: imgKey } })
            .then(res => {
              res = res.data
              if (res.status !== 200) return this.$message.error(res.message)
              var credentials = res.data.Credentials
              if (!credentials) return this.$message.error('无上传权限！')
              const credential = {
                TmpSecretId: credentials.TmpSecretId,
                TmpSecretKey: credentials.TmpSecretKey,
                XCosSecurityToken: credentials.Token,
                // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                StartTime: res.data.StartTime, // 时间戳，单位秒，如：1580000000
                ExpiredTime: res.data.ExpiredTime, // 时间戳，单位秒，如：1580000900
              }
              callback(credential)
            })
        },
      })
      // 上传到cos
      cos.putObject(
        {
          Bucket: 'ginblog-1302428193' /* 必须 */,
          Region: 'ap-chengdu' /* 存储桶所在地域，必须字段 */,
          Key: imgKey /* 必须 */,
          StorageClass: 'STANDARD',
          Body: info.file, // 上传文件对象
          onProgress: progressData => {
            // console.log(JSON.stringify(progressData))
          },
        },
        (err, data) => {
          if (err) return this.$message.error('上传失败！')
          this.profileInfo.avatar = 'http://' + data.Location
          this.$message.success('图片上传成功！')
        }
      )
    },
    uploadBgcImg (info) {
      var reg = /\.[^.]+$/
      const imgKey = '/profileImg/' + 'bgc' + reg.exec(info.file.name)
      var cos = new COS({
        // 必选参数
        getAuthorization: (options, callback) => {
          this.$http
            .get('cos/credential', { params: { userImgPath: imgKey } })
            .then(res => {
              res = res.data
              if (res.status !== 200) return this.$message.error(res.message)
              var credentials = res.data.Credentials
              if (!credentials) return this.$message.error('无上传权限！')
              const credential = {
                TmpSecretId: credentials.TmpSecretId,
                TmpSecretKey: credentials.TmpSecretKey,
                XCosSecurityToken: credentials.Token,
                // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                StartTime: res.data.StartTime, // 时间戳，单位秒，如：1580000000
                ExpiredTime: res.data.ExpiredTime, // 时间戳，单位秒，如：1580000900
              }
              callback(credential)
            })
        },
      })
      // 上传到cos
      cos.putObject(
        {
          Bucket: 'ginblog-1302428193' /* 必须 */,
          Region: 'ap-chengdu' /* 存储桶所在地域，必须字段 */,
          Key: imgKey /* 必须 */,
          StorageClass: 'STANDARD',
          Body: info.file, // 上传文件对象
          onProgress: progressData => {
            // console.log(JSON.stringify(progressData))
          },
        },
        (err, data) => {
          if (err) return this.$message.error('上传失败！')
          this.profileInfo.img = 'http://' + data.Location
          this.$message.success('图片上传成功！')
        }
      )
    },
    async updateProfile (id) {
      const { data: res } = await this.$http.put(`profile/${id}`, this.profileInfo)
      if (res.status !== 200) return this.$message.error(res.message)
      this.$message.success('个人信息更新成功！')
      this.$router.push('/index')
    },
    updateCancel () {},
  },
}
</script>

<style>

</style>
